<script lang="ts">
import {defineComponent} from "vue"
import {useResource} from "@/components/FunctionComponents"
import UploadImage from "@/assets/image/upload-ico.png"
import {useDisabledStatus} from "@/hooks/form";
import {usePreviewImages} from "@/components/FunctionComponents"

export default defineComponent({
  name: "ImageInput",
  emits: ['update:modelValue', 'change', 'input'],
  props: {
    modelValue: {
      type: String,
      required: true
    },
    disabled: {
      type: Boolean
    }
  },
  setup(props, {emit}) {
    const IsDisabled = useDisabledStatus(props?.disabled)

    const icon: string = UploadImage

    /**
     *  选择图片
     */
    function selectImage() {
      if (IsDisabled.value) {
        return;
      }
      useResource('image', function (res: any[]) {
        if (res.length > 0) {
          const file: any = res[0]
          emit('change', file.url)
          emit('input', file.url)
          emit('update:modelValue', file.url)
        }
      }, 1)
    }

    /**
     * 预览图片
     * @constructor
     */
    function PreviewImages() {
      usePreviewImages(props.modelValue)
    }

    /**
     * 清空值
     * @constructor
     */
    function ClearValue() {
      emit('change', '')
      emit('input', '')
      emit('update:modelValue', '')
    }

    return {
      selectImage,
      ClearValue,
      icon,
      IsDisabled,
      PreviewImages
    }
  }
})
</script>

<template>
  <div class="image-input">
    <div class="image-box" v-if="modelValue">
      <el-image :src="modelValue" loading="lazy" lazy></el-image>
      <div class="image-tool">
        <app-icon name="View" @click.stop="PreviewImages"></app-icon>
        <app-icon v-if="!IsDisabled" @click.stop="ClearValue" name="Close"></app-icon>
      </div>
    </div>
    <div v-else class="image-box app-tap" @click="selectImage">
      <el-image :src="icon" loading="lazy" lazy></el-image>
    </div>
  </div>
</template>
<style lang="scss" scoped>
$image-input-size: 60px;

.image-input {
  display: inline-block;
  width: $image-input-size;
  height: $image-input-size;
  border: 1px solid var(--el-border-color);
  background-color: var(--el-bg-color-page);
  border-radius: 4px;
  box-sizing: border-box;

  .image-box {
    position: relative;
    width: $image-input-size;
    height: $image-input-size;

    .el-image {
      position: absolute;
      left: 0;
      top: 0;
      width: calc($image-input-size - 2px);
      height: calc($image-input-size - 2px);
      border-radius: 4px;
    }

    .image-tool {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: calc($image-input-size - 2px);
      height: calc($image-input-size - 2px);
      line-height: calc($image-input-size - 2px);
      text-align: center;
      background-color: rgba(0, 0, 0, .5);
      border-radius: 4px;

      :deep(.app-icon) {
        margin: 0 5px;
        color: #ffffff;
        cursor: pointer;
      }
    }

    &:hover {
      .image-tool {
        display: inline-block;
      }
    }
  }
}
</style>
